/**
 * Created by lenovo on 2016/6/26.
 */
function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}
//可视区高
function vieH(){
    return document.documentElement.clientHeight;
}
//可视区宽
function vieW(){
    return document.documentElement.clientWidth;
}
//var arr=['<div  class="add"><ul class="addpage" id="addpage"> <li></li>    <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>    <li></li> <li></li> </ul> </div>',
//    '<div><ul class="ul">今日头条</ul></div>',
//    '<div><ul class="ul">我的网址</ul></div>',
//    '<div><ul class="ul">花椒直播</ul></div>',
//    '<div><ul class="ul">游戏中心</ul></div>',
//    '<div><ul class="ul">热播影视</ul></div>',
//    '<div><ul class="ul">音乐精选</ul></div>',
//    '<div><ul class="ul">精品购物</ul></div>'];

//拖拽碰撞
var oUl=$('addpage');
var aLi=oUl.children;
var zIndex=2;
//alert(aLi.length);//12
//0.布局转换
var aPos=[];	//[{left:?,top:?},{},{}]
for(var i=0;i<aLi.length;i++){
    aPos.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
    aLi[i].style.left=aPos[i].left+'px';
    aLi[i].style.top=aPos[i].top+'px';
}
for(var i=0;i<aLi.length;i++){
    aLi[i].style.position='absolute';
    aLi[i].style.margin=0;
    aLi[i].index=i;
}
//1.拖拽
for(var i=0;i<aLi.length;i++){
    drag(aLi[i]);//拖拽每一个图标
}
function drag(obj){
    obj.onmousedown=function(ev){
        var oEvt=ev||event;
        var disX=oEvt.clientX-obj.offsetLeft;
        var disY=oEvt.clientY-obj.offsetTop;
        obj.style.zIndex=zIndex++;
        clearInterval(obj.timer);
        document.onmousemove=function(ev){
            var oEvt=ev||event;
            obj.style.left=oEvt.clientX-disX+'px';
            obj.style.top=oEvt.clientY-disY+'px';
            //2.move时碰撞
            var nearObj=findNearest(obj);
            if(nearObj && nearObj!=obj){//撞到了
                //动所有的房客
                //交换索引，所有房客
                //'所有'有条件的
                var n=obj.index;
                var m=nearObj.index;
                for(var i=0;i<aLi.length;i++){
                    //n<aLi[i].index<=m
                    //m<=aLi[i].index<n
                    if(aLi[i].index>n && aLi[i].index<=m){
                        //←
                        aLi[i].index--;
                        move(aLi[i],aPos[aLi[i].index]);
                    }else if(aLi[i].index>=m && aLi[i].index<n){
                        //→
                        aLi[i].index++;
                        move(aLi[i],aPos[aLi[i].index]);
                    }
                }
                obj.index=m;
            }
        };
        document.onmouseup=function(){
            document.onmousemove=document.onmouseup=null;
            //抓着的对象回自个位置
            move(obj,aPos[obj.index]);
        };
        return false;
    };
}
function findNearest(obj){
    var minDis=99999999;
    var minIndex=-1;
    for(var i=0;i<aLi.length;i++){
        //if(obj==aLi[i]) continue;
        if(collTest(obj,aLi[i])){	//撞到的房子
            //还要找最近
            var dis=getDis(obj,aLi[i]);//取出来的也是obj1到房子的距离
            //console.log(dis);
            if(dis<minDis){
                minDis=dis;
                minIndex=i;
            }
        }
    }
    if(minIndex==-1){
        return null;
    }else{
        return aLi[minIndex];	//就返房客出去
    }
}
function getDis(obj1,obj2){
    var a=aPos[obj2.index].left-obj1.offsetLeft
    var b=aPos[obj2.index].top-obj1.offsetTop;
    return Math.sqrt(a*a+b*b);
}
function collTest(obj1,obj2){//obj1对象和obj2的位置（房子)撞
    var l1=obj1.offsetLeft;
    var t1=obj1.offsetTop;
    var r1=obj1.offsetLeft+obj1.offsetWidth;
    var b1=obj1.offsetTop+obj1.offsetHeight;
    var l2=aPos[obj2.index].left;
    var t2=aPos[obj2.index].top;
    var r2=aPos[obj2.index].left+obj2.offsetWidth;
    var b2=aPos[obj2.index].top+obj2.offsetHeight;
    if(l1>r2||t1>b2||r1<l2||b1<t2){
        return 	false;
    }else{
        return true;
    }
}
//获取计算后的样式
function getStyle(obj,attr){
    if(obj.currentStyle){ // IE9以下获取不到简写的复合样式,单边写法可以获取到
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }
}
//运动方法
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bBtn = true;
        for(var attr in json){
            var iCur = 0;
            if( attr == 'opacity'){
                iCur = Math.round(getStyle(obj,attr)*100);
            }
            else{
                iCur = parseInt(getStyle(obj,attr));
            }
            var iSpeed = (json[attr] - iCur)/7;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(iCur != json[attr]){
                bBtn = false;
            }
            if(attr == 'opacity'){
                obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
                obj.style.opacity = (iCur+iSpeed)/100;
            }
            else{
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
        if(bBtn){
            clearInterval(obj.timer);
            if(fn){
                fn.call(obj);
            }
        }
    },30);
}
//添加
var oAddurl=$('add_url');
var aMask=$('mask');
var oClose=$('add_close');
var aLogolist=$('logo_list');
var aList=aLogolist.getElementsByTagName('li');
var oNavClose=$('navclose');
var oManger=$('nav_manager');
var oNavAddUrl=$('add_navmanger');
//var arr=[];
var curLi=null;	//当前li
var oRemoveI=oUl.getElementsByTagName('i');
//1.给所有+添加事件
for(var i=0;i<aLi.length;i++){
    aLi[i].onclick=function(){
        if(this.getElementsByTagName('img')[0]==null){
            openLightBox();
            curLi=this;
        }
    };
}
//添加
var index0=0;
for(var i=0;i<aList.length;i++){
    //arr.push(oListImg);
    aList[i].index=i;
    aList[i].onclick=function(){
        var oListImg=this.getElementsByTagName('img')[0];
        closeLightBox();
        var oImg=document.createElement('img');
        oImg.src=oListImg.src;
        if(this.className!='addsele'){
            curLi.appendChild(oImg);
            curLi.className='active';
            //给当前li设置一个index0属性，储存下所添加网址处的位置
            curLi.setAttribute('index0',this.index);
        }
        this.className='addsele';
    }
}
//删除
var timer=null;
for(var i=0;i<oRemoveI.length;i++){
    //oRemoveI 是删除图标
    oRemoveI[i].onclick=function(){
        var oRLi=this.parentNode.parentNode;
        oRLi.getElementsByTagName('img')[0].style.height='0px';
        clearTimeout(timer);
        timer=setTimeout(function(){
            oRLi.removeChild(oRLi.getElementsByTagName('img')[0]);
        },500);
        oRLi.removeAttribute('class');
        //alert(oRLi.getAttribute('index0'));
        //aList 代表添加网址的li
        aList[oRLi.getAttribute('index0')].removeAttribute('class');
    }
}
oClose.onclick=function(){
    closeLightBox();
}
oNavClose.onclick=function(){
    NavcloseLightBox();
}
oNavAddUrl.onclick=function(){
    NavopenLightBox();
}
function openLightBox(){
    aMask.style.display=oAddurl.style.display='block';
}
function closeLightBox(){
    aMask.style.display=oAddurl.style.display='none';
}
function NavcloseLightBox(){
    aMask.style.display=oManger.style.display='none';
}
function NavopenLightBox(){
    aMask.style.display=oManger.style.display='block';
}
//底部导航
var aSlider=$('slider');
var oAs=aSlider.getElementsByTagName('a');
var now=0;
var oLeft=$('left_arrow');
var oRight=$('right_arrow');
var time=null;
//alert(oAs.length);
for(var i=0;i<oAs.length;i++){
    oAs[i].index=i;
    oAs[i].onclick=function(){
        now=this.index;
        tab();
    }
}

//事件委托
//aSlider.onclick=function(ev){
//    var oEvt=ev||window.event;
//    var target=oEvt.target||oEvt.srcElement;
//    if(target.nodeName.toLowerCase() == "a"){
//        target.className= "selected";
//    }
//}
function tab(){
    //arr中储存当前导航处显示的选项的下标
    arr.sort(function(n1,n2){    //数组的排序 降序
        return n1-n2;
    });
    //alert(arr);
    for(var j=0;j<oAs.length;j++){
        oAs[j].className='';
        if(j<now){
            oContLis[j].style.left=-vieW()+'px';
        }
        else {
            oContLis[j].style.left=vieW()+'px';
        }
    }
    oAs[now].className='selected';
    oContLis[now].style.left='0px';
}
function oNext(){
    for(var i in arr){
        if(now==arr[i]&&i!=arr.length-1){
            i++;
            now=arr[i];
            break;
        }
    }
    tab();
}
function  oPre(){
    for(var i in arr){
        if(now==arr[i]&&i!=0){
            i--;
            now=arr[i];
            break;
        }
    }
    tab();
}
oRight.onclick=function(){
    clearTimeout(time);
    time=setTimeout(oNext,200);
}
oLeft.onclick=function(){
    clearTimeout(time);
    time=setTimeout(oPre,200);
}
//频道管理
var oNavTab=$('navtab_list');
var oAddNavLi=oNavTab.children;
var oPmDiv=$('pm_div');
var oContent=$('content');
var arr=[];
//alert(oContent.children.length);
//alert(oAddNavLi.length);
var oContLis=oContent.children;
for(var i=0;i<oContLis.length;i++){
    oContLis[i].style.width=vieW();
    oContLis[i].style.height=vieH();
    oContLis[i].style.visibility='hidden';
}
//点击添加导航
for(var i=0;i<oAddNavLi.length;i++){
    oAddNavLi[i].index=i;
    oAddNavLi[i].onclick=function(){
        if(this.children[0].className=='pm_div  selected1'){
            this.children[0].className='pm_div';
            var oSpan0=this.getElementsByTagName('span')[0];
           // alert(oSpan0.innerHTML);
            for(var j=0;j<oAs.length;j++){
                //alert(aSlider.children.length);
                if(oAs[j].innerHTML.indexOf(oSpan0.innerHTML)!=-1){
                    //aSlider.removeChild(aSlider.children[j]);
                    aSlider.children[j].style.display='none';
                    oContLis[this.index].style.visibility='hidden';
                }
                for(var i in arr){
                    if(this.index==arr[i]){
                        arr.splice(i,1);
                    }
                }
            }
        }
        else{
            this.children[0].className='pm_div  selected1';
            var oSpan=this.getElementsByTagName('span')[0];
            //var oA=document.createElement('a');
            //oA.href='javaScript:';
            //oA.innerHTML='<span></span>'+oSpan.innerHTML;
            //aSlider.insertBefore(oA,aSlider.children[this.index]);
            for(var j=0;j<oAs.length;j++){
                //alert(aSlider.children.length);
                if(oAs[j].innerHTML.indexOf(oSpan.innerHTML)!=-1){
                    //aSlider.removeChild(aSlider.children[j]);
                    oAs[j].style.display='block';
                }
            }
            oContLis[this.index].style.visibility='visible';
            now=this.index;
            arr.push(this.index);
            tab();
           // oAs[this.index].className='selected';
        }
    }
}
//封装鼠标滚轮事件
addMouseWheel(oContent,function(down){
    if(down){
        clearTimeout(time);
        time=setTimeout(oNext,200);
    }
    else{
        clearTimeout(time);
        time=setTimeout(oPre,200);
    }
});
function addMouseWheel(obj, fn){
    function fnWheel(ev){
        var oEvent=ev||event;
        var down=false;
        if(oEvent.wheelDelta){
            down=oEvent.wheelDelta<0?true:false;
        }
        else{
            down=oEvent.detail<0?false:true;
        }
        fn(down);
        oEvent.preventDefault && oEvent.preventDefault();
        return false;
    }
    if(navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){
        obj.addEventListener('DOMMouseScroll', fnWheel, false);
    }
    else{
        obj.onmousewheel=fnWheel;
    }
}